<template>
  <div class="a">
    <div class="a1" v-for="item in '123245213213'" :key="item">{{ item }}</div>
  </div>
  <div class="home">
    <button @click="logout">退出登录</button>
    <h1>Welcome to halo Page</h1>
  </div>
  <hallolo msg='这是halo页面'></hallolo>
  <myCom1 :url="url"></myCom1>
  <myCom1 :url="url2"></myCom1>
  <myCom1 :url="url3"></myCom1>
</template>

<script setup>
import { useRouter } from 'vue-router'
import hallolo from '../components/HelloWorld.vue'
import myCom1 from '../components/myCom1.vue'
const a1Img = require('@/assets/a1.png')
const a2Img = require('@/assets/a2.png')
const a3Img = require('@/assets/a3.png')

const router = useRouter()
let logout = () => {
  sessionStorage.setItem('showLogin', '1')
  router.push('/LoginDoubao')
}

let url = a1Img
let url2 = a2Img
let url3 = a3Img

// export default {
//   name: 'HaloPage',
//   components: {
//     hallolo,
//     myCom1
//   }, methods: {
//     logout() {
//       sessionStorage.setItem('showLogin', '1')
//       this.$router.push('/LoginDoubao')
//     }
//   },
//   data() {
//     return {
//       url: a1Img,
//       url2: a2Img,
//       url3: a3Img,
//     }
//   },
// }
</script>

<style scoped>
.home {
  padding: 20px;
}

.a {
  display: flex;
  width: 500px;
  height: 500px;
  background-color: antiquewhite;
}

.a1 {
  width: 20px;
  height: 20px;
  background-color: red;
  margin: 30px;
}
</style>